<template>
  <div class="main">
    <h1 class="title">知识竞赛</h1>

    <div class="container">
      <card
        data-image="https://images.unsplash.com/photo-1479660656269-197ebb83b540?dpr=2&auto=compress,format&fit=crop&w=1199&h=798&q=80&cs=tinysrgb&crop="
        @click="jump(0)"
      >
        <template #header>
          <h1>必答题</h1>
        </template>
        <template #content>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </template>
      </card>
      <card
        data-image="https://images.unsplash.com/photo-1479659929431-4342107adfc1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="
        @click="jump(1)"
      >
        <template #header>
          <h1 slot="header">抢答题</h1>
        </template>
        <template #content>
          <p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing
            elit.</p>
        </template>
      </card>
      <card
        data-image="https://images.unsplash.com/photo-1479644025832-60dabb8be2a1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="
        @click="jump(2)"
      >
        <template #header>
          <h1 slot="header">风险题</h1>
        </template>
        <template #content>
          <p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing
            elit.</p>
        </template>
      </card>
      <card
        data-image="https://images.unsplash.com/photo-1479621051492-5a6f9bd9e51a?dpr=2&auto=compress,format&fit=crop&w=1199&h=811&q=80&cs=tinysrgb&crop="
        @click="jump(3)"
      >
        <template #header>
          <h1 slot="header">冠亚争霸</h1>
        </template>
        <template #content>
          <p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing
            elit.</p>
        </template>
      </card>
    </div>
  </div>
</template>

<script> 
import card from "@/components/card.vue";
import { reactive, toRefs } from "vue";
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: 'index',
  components: {
    "card": card
  },
  setup(){
    const data = reactive({
      question_list:["必答题","抢答题","风险题","冠亚军争霸"],
    });
    const store = useStore();
    const router = useRouter();
    const jump = (index)=>{
      store.commit('setRuleIndex',index);
      router.push("/rule");
    }
    return {
      ...toRefs(data),
      jump
    }
  }
}
</script>

<style lang='scss' >
$hoverEasing: cubic-bezier(0.23, 1, 0.32, 1);
$returnEasing: cubic-bezier(0.445, 0.05, 0.55, 0.95);

.main {
  height: 100vh;
  font-family: "Raleway";
  font-size: 14px;
  font-weight: 500;
  background-color: #bcaaa4;
  -webkit-font-smoothing: antialiased;
}

.title {
  font-family: "Raleway";
  font-size: 24px;
  font-weight: 700;
  color: #5d4037;
  text-align: center;
}
.title,.container{
  position: relative;
  bottom: -50px;
}
p {
  line-height: 1.5em;
}


.container {
  padding: 40px 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card-wrap {
  margin: 10px;
  transform: perspective(800px);
  transform-style: preserve-3d;
  cursor: pointer;
  background-color: #fff;

  &:hover {
    .card-info {
      transform: translateY(0);
    }
    .card-info p {
      opacity: 1;
    }
    .card-info,
    .card-info p {
      transition: 0.6s $hoverEasing;
    }
    .card-info:after {
      transition: 5s $hoverEasing;
      opacity: 1;
      transform: translateY(0);
    }
    .card-bg {
      transition: 0.6s $hoverEasing, opacity 5s $hoverEasing;
      opacity: 0.8;
    }
    .card {
      transition: 0.6s $hoverEasing, box-shadow 2s $hoverEasing;
      box-shadow: rgba(white, 0.2) 0 0 40px 5px, rgba(white, 1) 0 0 0 1px,
        rgba(black, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px,
        inset white 0 0 0 6px;
    }
  }
}

.card {
  position: relative;
  flex: 0 0 240px;
  width: 240px;
  height: 320px;
  background-color: #333;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: rgba(black, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px,
    inset rgba(white, 0.5) 0 0 0 6px;
  transition: 1s $returnEasing;
}

.card-bg {
  opacity: 0.5;
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: 1s $returnEasing, opacity 5s 1s $returnEasing;
  pointer-events: none;
}

.card-info {
  padding: 20px;
  position: absolute;
  bottom: 0;
  color: #fff;
  transform: translateY(40%);
  transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);

  p {
    opacity: 0;
    text-shadow: rgba(black, 1) 0 2px 3px;
    transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }



  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(#000, 0.6) 100%
    );
    background-blend-mode: overlay;
    opacity: 0;
    transform: translateY(100%);
    transition: 5s 1s $returnEasing;
  }
}

.card-info h1 {
  font-family: "Playfair Display";
  font-size: 36px;
  font-weight: 700;
  text-shadow: rgba(black, 0.5) 0 10px 10px;
}
</style>